<template>
  <div class="login">
    <!-- <img src="@/assets/login/login-l.png" alt="" /> -->
    <div class="box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-weight: 600; font-size: 24px">烘焙销售系统管理后台</span>
        </div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input type="" v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item prop="rememberPassword" style="margin-top: -30px; margin-right: -250px">
              <el-checkbox v-model="ruleForm.rememberPassword">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item style="margin-top: 30px; margin-right: 50px">
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
      </el-card>  
    </div>


  </div>
</template>


<script>
import {login} from '../../api/user'
import axios from 'axios';
import CryptoJS from "crypto-js";
export default {
    name:'Login_',
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          username:'',
          pass: '',
          rememberPassword:true
        },
        user:{
          username:'',
          password: '',
        },
        rules: {
          pass: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
        },

      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.user.password = this.ruleForm.pass
            this.user.username = this.ruleForm.username
            //封装使用axios

            //如果不加async await 拿到的是promise<pending>
            // const respone = await login(this.user)
            // console.log('respone'+respone)

            //在返回结果加then可以解决返回值是promise<pending>的情况
            const respone2 = login(this.user)
            respone2.then((result)=>{
              console.log(result.data)
              //存数据
              this.$store.commit('user/setUserInfo',result.data)

              //记住密码
              if (this.ruleForm.rememberPassword) {
                this.$cookie.set("username", this.user.username, {
                  expires: 30,
                });
                this.$cookie.set("password", 
                  //第二个参数为密钥
                  CryptoJS.AES.encrypt(this.user.password, process.env.VUE_APP_KEYS), {
                  expires: 30,
                });
                this.$cookie.set("rememberPassword", 0, { //0true，1false
                  expires: 30, 
                });
              } else {
                this.$cookie.remove("username");
                this.$cookie.remove("password");
                this.$cookie.remove("rememberPassword");
              }
              this.$store.state.menu_active = 1;
              this.$store.state.carousel_index = Math.round(Math.random()*12) + 1
              //设置默认头像
              this.$store.state.user.userInfo.avatar = this.$store.state.user.userInfo.avatar != null? this.$store.state.user.userInfo.avatar : process.env.VUE_APP_AVATAR
              // console.log(this.$store.state.carousel_index)
              //跳转
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              this.$router.push("/home")

            }).catch((erro)=>{
              console.log(erro)
              this.$message.error(erro)
              // console.log(erro)
            })


            // alert('submit!'); 

            //不封装直接使用aixos
            // let that = this;
            // axios.post('admin/user/login',that.user).then(res=>{
            //   console.log(res.data)
            // }).catch(res=>{
            //   console.log(res.data)
            // })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.ruleForm.rememberPassword=false
      },
      getCookie(){
        this.ruleForm.username = this.$cookie.get("username");
        this.ruleForm.pass =  CryptoJS.AES.decrypt(
                                this.$cookie.get("password"),
                                process.env.VUE_APP_KEYS
                              ).toString(CryptoJS.enc.Utf8);
        this.ruleForm.rememberPassword = this.$cookie.get("rememberPassword") == 0? true :false;
        // console.log(process.env.VUE_APP_KEYS)
      }
    },
    mounted() {
      this.getCookie();
    }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    height: 550px;
    width: 450px;
    background-image: url(@/assets/login/login-3.png);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 45%;
    
    /* background-size: cover; */
    opacity: 0.9;
  }

  .demo-ruleForm{
    display: flex;
    flex-direction:column;
    justify-content: space-around;
    height: 350px;
    margin-top: 50px;
    
  }

  .box{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 100px;
    opacity: 0.9;

  }

  .login {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* height: 98.899vh; */
    /* height: 100%; */
    width:101vw;
    height:99vh; 

    /* // background: #476dbe; */
    background-color: #333;
    background-image: url(@/assets/login/login-l.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin: -5px;
	  padding: 0;

    /* width: 100%;
    height: 100vh;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
    align-items: center; */
  }



</style>